<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆管理页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" tppabs="/layui/css/layui.css" media="all">
    <style>
        .layui-table-cell{
            height: auto;
        }
    </style>
</head>
<body>

<div style="width: 80%;text-align: center;margin-left: 10%">

    <div class="layui-main">
        <!-- 表格上方标题 -->
        <blockquote class="layui-elem-quote">车辆列表</blockquote>
        <!-- 添加按钮 -->
        <a class="layui-btn layui-btn-sm" id="insert">新增</a>
        <!-- 产品表 -->
        <table class="layui-hide" id="carTable" lay-filter="carTable"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="updateCar">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteCar">删除</a>
        </script>
    </div>
    <div style="height: 150px">www.klei.com</div>
</div>

<!-- 新增信息 -->
<div id="insertCar" style="display: none; padding: 20px">
    <form id="insertCarForm" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">车辆名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="text" name="type" class="layui-input" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">座位数</label>
            <div class="layui-input-block">
                <input type="number" name="sitnum" class="layui-input" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所在城市</label>
            <div class="layui-input-block">
                <select id="cname">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="number" name="price" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-block">
                <input type="number" name="number" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片地址</label>
            <div class="layui-input-block">
                <input type="text" name="picture" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="insertCarSub">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 修改信息弹出 -->
<div id="updateCar" style="display: none; padding: 20px">
    <form id="updateCarForm" class="layui-form layui-form-pane" lay-filter="updateCarForm">
        <div class="layui-form-item" style="display: none;">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
                <input type="text" name="id" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车辆名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="text" name="type" class="layui-input" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">座位数</label>
            <div class="layui-input-block">
                <input type="number" name="sitnum" class="layui-input" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="number" name="price" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-block">
                <input type="number" name="number" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateCarSub">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        //加载数据
        table.render({
            elem: '#carTable'
            , url: '/getAllCar'
            , cellMinWidth: "80%"
            // ,height: 'full-200'
            , cols: [[
                {field: 'id', width: "10%", title: '编号', align:"center", sort: true, hide:true}
                , {field: 'picture', width: "15%", title: '图片', align:"center", templet: "#imgtmp", style:"height:200px" }
                , {field: 'name', width: "10%", title: '车辆名称', align:"center"}
                , {field: 'type', width: "10%", title: '类型', align:"center"}
                , {field: 'sitnum', width: "10%", title: '座位数', align:"center"}
                , {field: 'cname', width: "20%", title: '所在城市', align:"center"}
                , {field: 'price', width: "10%", title: '价格', align:"center"}
                , {field: 'number', width: "10%", title: '数量', align:"center"}
                , {toolbar: '#barDemo', title: '操作', width: "15%", align:"center"}
            ]]
            , id: 'carTable'
            , page: true
        });

        // 显示添加弹出层
        $('#insert').click(function() {
            // 每次显示前重置表单
            $('#insertCarForm')[0].reset();
            layer.open({
                type: 1,
                title: '添加车辆信息',
                skin: 'layui-layer-molv',
                area: ['500px'],
                content: $('#insertCar')
            });

            $.ajax({
                url: "/getAllCountry",
                type: "GET",
                contentType: 'application/json',
                dataType: 'json',
                success: function(data) {
                    $("#cname").empty();
                    $("#cname").append('<option>请选择</option>');
                    for (var i in data) {
                        $("#cname").append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
                    }
                },
                error: function() {
                    console.log("ajax error");
                }
            });

        });

        // 新增表单提交
        form.on('submit(insertCarSub)', function(data) {

            var cid = $("#cname option:selected").attr("value");
            var cityjson = '{"name":"' + data.field.name
                + '", "type":"' + data.field.type
                + '", "sitnum":' + data.field.sitnum
                + ', "cid":' + cid
                + ', "price":' + data.field.price
                + ', "number":' + data.field.number
                + ', "picture":"' + data.field.picture
                + '"}';

            console.log(cityjson);
            // ajax方式新增
            $.ajax({
                url: "/insertCar",
                type: "POST",
                data: cityjson,
                contentType: 'application/json',
                dataType: 'json',
                success: function(data) {
                    if (data) {
                        layer.close(layer.index);
                        layer.msg('添加成功');
                        table.reload('carTable');
                    } else {
                        layer.msg('添加失败');
                    }
                },
                error: function() {
                    console.log("ajax error");
                }
            });
            // 阻止表单跳转
            return false;
        });

        //监听行工具栏事件，更新产品
        table.on('tool(carTable)', function (obj) {
            //获取当前行数据 以及 lay-event的值
            var data = obj.data;
            var event = obj.event;
            //更新用户方法
            if (event == 'updateCar'){

                // 显示更新表单前自动为表单填写该行的数据
                form.val('updateCarForm', {
                    "id": data.id,
                    "name": data.name,
                    "type": data.type,
                    "sitnum": data.sitnum,
                    "price": data.price,
                    "number": data.number
                });
                // 显示更新表单的弹出层
                layer.open({
                    type: 1,
                    title: '更新车辆信息',
                    skin: 'layui-layer-molv',
                    area: ['500px'],
                    content: $('#updateCar')
                });
                // 更新表单提交
                form.on('submit(updateCarSub)', function(data) {
                    // ajax方式更新
                    $.ajax({
                        url: "/updateCar",
                        type: "POST",
                        data: JSON.stringify(data.field),
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function(data) {
                            if (data) {
                                layer.close(layer.index);
                                layer.msg('更新成功');
                                table.reload('carTable');
                            } else {
                                layer.msg('更新失败');
                            }
                        },
                        error: function() {
                            console.log("ajax error");
                        }
                    });// 阻止表单跳转
                    return false;
                });
            }

            // 删除事件
            if (event == 'deleteCar') {
                layer.confirm('确定删除该车辆吗？', function(index) {
                    // ajax方式删除
                    $.ajax({
                        url: '/deleteCar/' + data.id,
                        type: "DELETE",
                        dataType: 'json',
                        success: function(data) {
                            if (data) {
                                layer.msg('删除成功');
                                table.reload('carTable');
                            } else {
                                layer.msg('删除失败');
                            }
                        },
                        error: function() {
                            console.log("ajax error");
                        }
                    });
                    layer.close(index);
                });
            }
        });

    });
</script>
<script type="text/html" id="imgtmp">
    <img src="{{d.picture}}"  style="width: 100%;height: 100%" />
</script>

</body>
</html>